<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style type="text/css">
        .login-form{
            width: 450px;
            height: 320px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            box-shadow: 0 0 25px #909399;
            margin: 150px auto;
            padding: 35px 35px 15px 35px;
        }
        .login-title{
            text-align: center;
            margin: 0 auto 10px auto;
            color: #303133;
        }
    </style>

</head>
<body>
<div id="div">
    <el-form ref="loginForm" label-width="100px"  class="login-form">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号" prop="account">
            <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
            <el-input type="text" v-model="loginForm.captcha"></el-input>
            <el-image
                    style="width: 100px; height: 50px"
                    :src="url"
                    @click="refreshCaptcha"
                    ></el-image>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button >重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>

<script type="application/javascript">
    new Vue({
        el:'#div',
        data() {
            return {
                url:"/captcha",
                loginForm:{
                    username:"",
                    password:"",
                    captcha:""
                }
            };
        },
        methods: {
            login() {
                axios.get("user/login",{params:{
                    username:this.loginForm.username,
                    password: this.loginForm.password,
                    captcha: this.loginForm.captcha
                    }}).then((res)=>{
                        console.log(res.data)
                    if (res.data.code=="1000"){
                        localStorage.setItem("user",JSON.stringify(res.data.data))
                        location.href="index.html"
                    }else{
                        this.$alert(res.data.msg)
                        this.refreshCaptcha()
                    }
                })
            },
            refreshCaptcha() {
                    // axios.get("/captcha").then((res)=>{
                    //   console.log(this.url)
                    //     console.log(res)
                    //
                    // })
                this.url = 'http://localhost:8081/captcha?' + new Date().getTime();
            }
        }
    });
</script>
</html>